<%--
  Created by IntelliJ IDEA.
  User: wwh
  Date: 2017/7/31
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="admin-main">
    <div id="college">
        <fieldset class="layui-elem-field">
            <legend>创建班级</legend>
            <div class="layui-field-box">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">系部：</label>
                            <div class="layui-input-inline">
                                <select name="departments" lay-filter="department" id="showDepartment"
                                        lay-search>
                                    <option value="">请选择系部</option>
                                </select>
                            </div>
                            <label class="layui-form-label">专业：</label>
                            <div class="layui-input-inline">
                                <select name="majores" lay-filter="major" id="showMajor"
                                        lay-search>
                                    <option value="">请选择专业</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">班级名称：</label>
                            <div class="layui-input-inline" style="width: 200px">
                                <input name="class" placeholder="请输入班级名称" lay-verify="required" class="layui-input" id="showClass">
                            </div>
                            <div class="layui-input-inline">
                                <button lay-filter="createClass" class="layui-btn" lay-submit>创建</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </fieldset>
    </div>
</div>
<script>
    "use strict";

    var schoolid = <%=request.getParameter("schoolid")%>;
    layui.use(['form', 'layer','jquery'], function () {
        var form = layui.form(),
            $ = layui.jquery,
            layer = layui.layer;

        //联动对象
        var linkage = {};
        //渲染下拉框
        linkage.formRender = function (obj, tip) {
            $(obj).empty();
            $(obj).append('<option value="">' + tip + '</option>');
            form.render('select');
        };
        //读取数据库信息并写回到select框中
        linkage.read = function (obj, url, init) {
            axios.get(url)
                .then(function (res) {
                    var array = res.data.data;
                    var html = '';
                    for (var i in array) {
                        html += '<option value=' + array[i].id + '>' + array[i].name + '</option>';
                    }
                    $(obj).append(html);
                    form.render('select');
                    if (init) $(obj).next().find('[lay-value="' + init + '"]').click();
                })
                .catch(function (res) {
                    console.log(res);
                });
        };

        var department = 'form select[name=departments]',
            major = 'form select[name=majores]',
            clazz = 'form input[name=class]';

        //读取系部
        if ($(department).length) {
            linkage.formRender(department, "选择系部");
            linkage.read(department, '/department/findBath/'+schoolid);
            //读取专业
            if ($(major).length) {
                linkage.formRender(major, "选择专业");
                form.on('select(department)', function (data) {
                    linkage.formRender(major, "选择专业");
                    linkage.read(major, '/major/findBath/' + data.value);
                });
            }
        }
    });
</script>
